<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" >
		<meta name="viewport" content="width=1920,initial-scale=1,user-scalable=no" />
		<title></title>
		<style>
			html,body{
				height: 50%;
			}
			body{
				width: 100%;
				height: 100%;
				position: relative;
				background-image: url(img/bg.jpg);
				background-repeat: repeat-x;
				background-size: 100% 100%;
				overflow: hidden;
				background-position:0 0 ;
				margin: 0 auto;
			}
			*{
				margin: 0;
				padding: 0;
			}
			#score{
				position: absolute;
				width: 100%;
				left: 0;
				text-align: center;
				z-index: 10000;
				color: white;
				height: 150px;
				line-height: 150px;
				font-size: 30px;
			}
			#game-over{
				padding: 20px;
				border: 2px dotted red;
				position: absolute;
				width: 30%;
				margin-left: 35%;
				margin-top: 100px;
				display: none;
			}
			#game-over p{
				text-align: center;
				text-transform: uppercase;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				color: white;
			}
			#input{
				position: absolute;
				left: 0;
				width: 100%;
				bottom: 0;
				top: 0;
				background-color: rgba(7,1,27,0.7);
				padding-top: 300px;
				text-align: center;
				z-index: 1000000;
			}
			#input input{
				height: 40px;
				width: 200px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
	<div id="score">
		当前分数:<span class="score">00</span>
	</div>
	<div id="game-over">
		<P>game over</P>
		<p></p>
		<p onclick="window.location.reload()" style="transform: scaleY(50%);">重新开始游戏</p>
	</div>
	<div id="input">
		<input type="text" autofocus="autofocus" placeholder="请输入用户名"/>
	</div>
	<img src="img/food.png" width="50" height="50" style="position: absolute;left: 0;top: 0;z-index: 1111111111;" id="dan"/>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	  <script>
	  	var drawline = {
	  		initScene:function(){
	  			var h = window.innerHeight
	  			var num = Math.ceil(h/50) 
	  			for(var i=0;i<num;i++){
	  				this.createHDom(i*50)
	  			}	  			
	  			var l = window.innerWidth
	  			var num2 = Math.ceil(l/50)
	  			for(var i=0;i<num2;i++){
	  				this.createLDom(i*50)
	  			}
	  		},
	  		createHDom:function(h){
	  			var dom = document.createElement('div')
	  			dom.style.position = 'absolute'
	  			dom.style.width = '100%'
	  			dom.style.borderTop = '1px solid darkgreen'
	  			dom.style.top = h+'px'
	  	        dom.style.zIndex = '100'
	  			document.body.appendChild(dom)
	  		},
	  		createLDom:function(l){
	  			var dom = document.createElement('div')
	  			dom.style.position = 'absolute'
	  			dom.style.height = window.innerHeight + 'px'
	  			dom.style.borderLeft = '1px solid darkgreen'
	  			dom.style.left = l+'px'
	  			dom.style.zIndex = '100'
	  			document.body.appendChild(dom)
	  		},
	  		
	  	}
//	  	drawline.initScene()
	  	
	  </script>
	  <script src="gest.js"></script>
	  <script src="snake.js"></script>
	</body>
</html>
